<template>
  <div class="detail">
    <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in img" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <h3>{{ title }}</h3>
    <p>
      {{ word }}
    </p>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "detail",

  data() {
    return {
      img: [],
      title: "",
      word: "",
    };
  },
  computed: {
    ...mapState(["item"]),
  },
  mounted() {
    this.SET_DETAIL({
      id: this.$route.params.id,
    });
    // console.log(this.item[0].img);
    this.img = this.item[0].img;
    this.title = this.item[0].title;
    this.word = this.item[0].word;
  },

  methods: {
    ...mapMutations(["SET_DETAIL"]),
    onClickIcon(){
      console.log(1);
    },
    onClickButton(){
      console.log(1);
    }
  },

  created() {},
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  .van-swipe {
    img {
      width: 100%;
    }
  }
}
</style>